<template>
  <view class="weather">
    <text>这是天气预报页面</text>
    <view>{{ state.name }}</view>
    <view class="child" :class="state.current==item.value?'active':''" v-for="(item,index) in state.list" :key="index" @click="changeCurrent(item,index)">
      {{ item.name }}
    </view>
  </view>
</template>

<script setup>
import { reactive, computed } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
const state = reactive({
  list:[
    {
      name:'测试1',
      value:'0',
    },
    {
      name:'测试2',
      value:'1',
    },
    {
      name:'测试3',
      value:'2',
    }
  ],
  name:'点击列表，切换选中',
  current:'0',
});
const shareData = computed(() => { // 分享的数据
  return {
    title: '天气预报',
    path: 'pages/weatherForecast/index',
  }
})
onLoad(() => {
  uni.$mpShare = shareData.value
});
onShow(() => {
  uni.$mpShare = shareData.value
});
function changeCurrent(item,index){
  console.log('item,index',item,index);
  state.current=index
}
</script>
<style scoped lang="scss">
.weather {
  width: 100%;
  box-sizing: border-box;
  .child{
    border: 1px solid red;
  }
  .active{
    background-color: orange;
  }
}
</style>
